<template>
    <div class="home_login">
        <div class="home_title">
            <h1>二手校园</h1>
        </div>
        <div class="home_select">
            <el-tabs class="el_tabs" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="账号密码登录" name="first">
                    <el-form :model="user" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="" prop="userName">
                            <el-input placeholder="账号名" v-model="user['userName']" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="" prop="password">
                            <el-input placeholder="密码" type="password" v-model="user['password']"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-radio style="margin-left: 3px" v-model="radio" label="1" @click.native.prevent="onRadioChange('1')">记住密码</el-radio>
                    <el-radio v-model="automatic" label="2" @click.native.prevent="onRadioChange('2')">下次自动登录</el-radio>
                    <!-- <el-radio-group v-model="radio" style="margin-left: 8px">
                      <el-radio @click.native.prevent="clickitem(3)" :label="3">记住密码</el-radio>
                      <el-radio @click.native.prevent="clickitem(9)" :label="9">下次自动登录</el-radio>
                    </el-radio-group> -->
                    <span class="password_forget" @click="forgetPassword">忘记密码</span>
                </el-tab-pane>
                <el-tab-pane label="手机动态码登录" name="second">
                    <el-form :model="user" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="" prop="code">
                            <el-input placeholder="手机号" v-model="user['code']">
                                <template>111</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="" prop="changeCode">
                            <el-input placeholder="动态码" v-model="user['changeCode']"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-radio v-model="radio" label="3">下次自动登录</el-radio>
                    <a href="" class="password_forget">账号申述</a>
                </el-tab-pane>
            </el-tabs>
            <div class="button" @click="login">登录</div>
        </div>
    </div>
</template>

<script>
import common from '../common/index'
export default {
  data () {
    const validatorTelAndMobile = function (rule, value, callback) {
      if (value) {
        common.phoneVerification(value) ? this.phoneType = !this.phoneType : callback(new Error())
      } else {
        callback(new Error())
      }
    }
    return {
      activeName: 'first',
      user: {
        userName: '',
        password: '',
        changeCode: ''
      },
      radio: false,
      automatic: false,
      rules: {
        userName: [
          { required: true, message: '您还未输入账号名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '您还未输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        code: [
          { validator: validatorTelAndMobile, required: true, message: '请输入正确手机号格式', trigger: 'blur' }
        ],
        changeCode: [
          { required: true, message: '请输入动态码', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    console.log('login')
  },
  methods: {
    login () {
      console.log(this.automatic, 'radio')
    },
    onRadioChange (e) {
      // 选中操作
      switch (e) {
        case '1':
          if (this.radio === e) {
            this.radio = ''
            return
          }
          this.radio = e
          break
        case '2':
          if (this.automatic === e) {
            this.automatic = ''
            return
          }
          this.automatic = e
          break
      }
    },
    change (val) {
      console.log(val)
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    forgetPassword () {
      this.$router.push({
        name: 'Representation'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.home_login {
    width: 476px;
    height: 450px;
    background: #fff;
    border-radius: 5px;
    .home_title {
        padding-top: 50px;
        box-sizing: border-box;
        h1 {
            font-weight: 600;
            font-size: 26px;
            text-align: center;
            color: #ff552e;
        }
    }
    .button {
        width: 100%;
        height: 42px;
        text-align: center;
        background-color: #ff552e;
        line-height: 42px;
        color: #fff;
        margin-top: 20px;
        cursor: pointer;
    }
    .home_select {
        width: 350px;
        margin: 30px auto 0;
        .password_forget {
            color: #999;
            float: right;
            font-size: 12px;
            cursor: pointer;
        }
        /deep/.el-radio__label {
            color: #999;
        }
        .el_tabs {
            margin-top: 30px;
        }
        /deep/.el-form-item__content {
            margin-top: 10px;
            margin-left: 0 !important;
        }
        /deep/.el-input__inner:focus {
            border: 1px solid #999;
        }
        /deep/.el-tabs__nav {
            width: 100%;
        }
        /deep/.el-tabs__active-bar {
            background-color: #ff552e;
        }
        /deep/.is-active {
                color: #ff552e !important;
            }
        /deep/ .el-tabs__item {
            text-align: center;
            width: 50%;
        }
        /deep/ .el-tabs__item:hover {
            color: #000;
        }
    }
}
</style>
